<template>
  <div class="center">
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-back" size="mini" @click="toHomework()"></el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="formVisible=true">添加</el-button>
      </div>
    </div>

    <el-table :data="tableData" stripe style="width: 100%" border fit highlight-current-row ref="tableDataRef">
      <el-table-column label="编号" prop="id" align="center"></el-table-column>
      <el-table-column prop="type" label="题目类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type==1">单选题</span>
          <span v-if="scope.row.type==2">多选题</span>
          <span v-if="scope.row.type==3">不定项选择题</span>
          <span v-if="scope.row.type==4">判断题</span>
          <span v-if="scope.row.type==5">填空题</span>
          <span v-if="scope.row.type==6">简答题</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="题目名" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="score" label="题目分数" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="answer" label="答案" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="answer_explain" label="答案解析" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteEvents(scope.row.question_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加题目" :visible.sync="formVisible" :close-on-click-modal="false" :close-on-press-escape="false"  width="40%" @close="addFormClose">
      <el-form :model="addForm" :rules="rules" ref="ruleForm" class="diolog_adapt" style="width: 600px">
        <el-form-item label="题目分数:" label-width="120px" prop="score">
          <el-input-number v-model="addForm.score" controls-position="right" :min="0" :max="100" type="number" placeholder="请输入题目分数"></el-input-number>
        </el-form-item>
        <el-form-item label="题目类型:" label-width="120px" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择" @change="resetAnswer()">
            <el-option
              v-for="item in programType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目名:" label-width="120px" prop="name">
          <el-input type="textarea" placeholder="请输入题目名" v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="选项:" label-width="120px" v-if="addForm.type== 1 || addForm.type==2 || addForm.type==3">
          <el-input placeholder="请输入内容" v-model="addForm.choices.A">
            <template slot="prepend">A</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="addForm.choices.B">
            <template slot="prepend">B</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="addForm.choices.C">
            <template slot="prepend">C</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="addForm.choices.D">
            <template slot="prepend">D</template>
          </el-input>
        </el-form-item>
        <el-form-item label="答案:" label-width="120px" prop="answer">
          <el-select v-model="addForm.answer" placeholder="请配置正确答案" v-if="addForm.type==1">
            <el-option label="A" value="A"></el-option>
            <el-option label="B" value="B"></el-option>
            <el-option label="C" value="C"></el-option>
            <el-option label="D" value="D"></el-option>
          </el-select>
          <el-select v-model="addForm.answer" placeholder="请配置正确答案" multiple v-if="addForm.type==2 || addForm.type==3">
            <el-option label="A" value="A"></el-option>
            <el-option label="B" value="B"></el-option>
            <el-option label="C" value="C"></el-option>
            <el-option label="D" value="D"></el-option>
          </el-select>
          <el-select v-model="addForm.answer" placeholder="请配置正确答案" v-if="addForm.type==4">
            <el-option label="对" :value="1"></el-option>
            <el-option label="错" :value="-1"></el-option>
          </el-select>
          <el-input type="textarea" v-model="addForm.answer" placeholder="请输入正确答案" v-if="addForm.type==5 || addForm.type==6"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" label-width="120px" prop="answer_explain">
          <el-input type="textarea" v-model="addForm.answer_explain"  placeholder="请输入答案解析(后台批改后学生平板端将会自动展示)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false" size="mini" round>取 消</el-button>
        <el-button v-if="editSubjects" type="primary" size="mini" round @click="editQuestionControl('ruleForm')">确 定
        </el-button>
        <el-button v-else type="primary" @click="addQuestionControl('ruleForm')" size="mini" round>确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addQuestion,
    delQuestion,
    editQuestion,
    getHomeworkById
  } from "@/api/launcherMade";

  export default {
    data() {
      return {
        id: this.$route.query.id,
        key: 1,
        addForm: {
          type: '',  //题目类型 1.单选题 2.多选题 3.不定项选择题 4.判断题 5.填空题 6.简答题
          score: '',  //题目分数
          name: '',  //题目名
          choices: {A: '', B: '', C: '', D: ''}, //选择题选项
          answer: '',  //题目答案
          answer_explain: '',  //答案解析
        },
        tableData: [],
        editSubjects: false,
        programType: [{label: '单选题', value: 1}, {label: '多选题', value: 2}, {label: '不定项选择题', value: 3}, {
          label: '判断题',
          value: 4
        }, {label: '填空题', value: 5}, {label: '简答题', value: 6}],
        rules: {
          type: [{required: true, message: '请选择作业/任务类型', trigger: 'blur'}],
          score: [{required: true, message: '请输入题目分数', trigger: 'blur'}],
          name: [{required: true, message: '请输入题目名', trigger: 'blur'}],
          answer: [{required: true, message: '请输入题目答案', trigger: 'blur'}],
        },
        formVisible: false,
        searchTable: "",
      }
    },
    created() {
      this.getHomeworkById();
    },
    methods: {
      Refresh() {
        this.listQuery = {homework_id: this.id}
        this.getHomeworkById()
      },
      getHomeworkById() {
        getHomeworkById({id: this.id, userId: localStorage.getItem('ID')}).then(res => {
          this.tableData = res.data
        }).catch(err => {
        })
      },
      addQuestionControl(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let addForm = JSON.parse(JSON.stringify(this.addForm))
            addForm.homework_id = this.id
            addForm.userId = localStorage.getItem("ID")
            addQuestion(addForm).then(res => {
              this.$message.success(res.msg)
              this.getHomeworkById()
              this.formVisible = false
            }).catch(err => {

            })
          } else {
            return false;
          }
        });
      },
      openEdit(row) {
        this.formVisible = true
        this.editSubjects = true
        this.addForm = {
          type: row.question_type,  //题目类型 1.单选题 2.多选题 3.不定项选择题 4.判断题 5.填空题 6.简答题
          score: row.score,  //题目分数
          name: row.question_name,  //题目名
          choices: row.choices, //选择题选项
          answer: row.answer,  //题目答案
          answer_explain: row.answer_explain,  //答案解析
          question_id: row.question_id
        }
      },

      editQuestionControl(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let editForm = JSON.parse(JSON.stringify(this.addForm))
            editForm.homework_id = this.id
            editForm.userId = localStorage.getItem("ID")
            editQuestion(editForm).then(res => {
              this.$message.success(res.msg)
              this.getHomeworkById()
              this.formVisible = false
              this.editSubjects = false
            }).catch(err => {

            })
          } else {
            return false;
          }
        });
      },
      resetAnswer(e) {
        this.addForm.answer=''
      },
      //删除按钮事件
      deleteEvents(question_id) {
        let params = {
          userId: localStorage.getItem("ID"),
          question_id: question_id,
        }
        delQuestion(params).then(res => {
          this.$message.success(res.msg)
          this.getHomeworkById()
        }).catch(err => {
          console.log("请求失败", err)
        })
      },
      toHomework() {
        this.$router.push({name: 'contentManage/homework'});
      },
      addFormClose() {
        this.editSubjects=false
        this.$nextTick(() => {
          this.addForm = this.$options.data.call(this).addForm
        })
      }
    },

  }
</script>

